<template>
    <div ref="chart2" style="height: 190px; background-color: #222733; border-radius: 4px;">

    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import * as echarts from "echarts";
import type { EChartsOption } from 'echarts/types/dist/echarts.d.ts'
import { onMounted, ref } from "vue";
// import axios from 'axios'

// 配置项
let option: EChartsOption = {
    xAxis: {
        type: "value"
    },
    yAxis: {
        type: 'category',
        data: [],
        inverse: true,
        animationDuration: 300,
        animationDurationUpdate: 300,
        max: 4
    },
    series: [
        {
            realtimeSort: true,
            type: 'bar',
            data: [],
        }
    ],
    grid: {
        height: "140px",
        top: "20px"
    },

    animationDuration: 0,
    animationDurationUpdate: 300,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
};



let chart2 = ref<HTMLDivElement | null>(null)
let myECharts: echarts.ECharts | null = null
let formData: { name: string, value: number }[] = []


async function getData() {

    await axios("/api/seller.json").then(({ data }) => {
        formData = data;
        // (option.xAxis as any).max = formData[0]?.value.toString()
        formData.sort((a, b) => b.value - a.value);
        run()
        // console.log(formData);
        // console.log((option.yAxis as any).data);

    })
}

let i = 0
function run() {
    let show = formData.map((item: any) => item.value).slice(0, 5);
    let name = formData.map((item: any) => item.name).slice(0, 5);
    switch (i % 3) {
        case 0:
            show = formData.map((item: any) => item.value).slice(0, 5);
            name = formData.map((item: any) => item.name).slice(0, 5);
            break
        case 1:
            show = formData.map((item: any) => item.value).slice(5, 10);
            name = formData.map((item: any) => item.name).slice(5, 10);
            break
        case 2:
            show = formData.map((item: any) => item.value).slice(10, 15);
            name = formData.map((item: any) => item.name).slice(10, 15);
            break
        default:
            break
    }
    i++;
    (option.yAxis as any).data = name;
    (option.series as any).data = show
    myECharts?.setOption({
        yAxis: {
            data: name // 只更新y轴类目数据
        },
        series: [
            {
                data: show // 只更新系列数据
            }
        ]
    });

}

setInterval(function () {
    run();
}, 3000);


function init() {
    myECharts = echarts.init(chart2.value)
    getData()
}

onMounted(() => {
    init()
    window.addEventListener('resize', () => { myECharts?.resize() });
})
</script>
